<!-- 博客列表页面 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/Common.css">
</head>

<body>
    <!-- 1. 导航栏 -->
    <div class="nav">
        <img src="../img/logo.png" alt="图片加载失败">
        <span>我的博客系统</span>
        <!-- 因为有一段距离，所以用一个 span 进行占位 -->
        <span class="space"></span>
        <a href="./blog_list.html">主页</a>
        <a href="./blog_edit.html">写博客</a>
        <a href="https://baidu.com/">注销</a>
    </div>

    <!-- 2. 个人信息 和 博客列表 -->
    <div class="container">
        <div class="container-left">
            <!-- 个人信息 -->
            <div class="card">
                <img src="../img/card.png" alt="图片加载失败">
                <h3>bingo</h3>
                <a href="https://blog.csdn.net/weixin_64423718?spm=1000.2115.3001.5343">bingo691</a>

                <div class="counter">
                    <span>文章</span>
                    <span>数量</span>
                </div>

                <div class="counter">
                    <span>1</span>
                    <span>2</span>
                </div>
            </div>
        </div>
        <div class="container-right">
            <!-- 博客列表 -->
            <div class="blog">
                <!-- 第一篇博客 -->
                <div class="title">
                    这是一篇博客
                </div>
                <div class="date">
                    2024-11-18
                </div>
                <!-- 详细信息 -->
                <div class="desc">
                    这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                    tempora libero quae dolor consectetur neque dolorem excepturi,
                    minima quos! Magnam, doloribus.
                </div>
                <a class="detail" href="../html/blog_content.html?blogId=1">查看全文&gt;&gt;</a>

                <!-- 第二篇博客 -->
                <div class="title">
                    这是一篇博客
                </div>
                <div class="date">
                    2024-11-18
                </div>
                <!-- 详细信息 -->
                <div class="desc">
                    这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                    tempora libero quae dolor consectetur neque dolorem excepturi,
                    minima quos! Magnam, doloribus.
                </div>
                <a class="detail" href="../html/blog_content.html?blogId=1">查看全文&gt;&gt;</a>

                <!-- 第三篇博客 -->
                <div class="title">
                    这是一篇博客
                </div>
                <div class="date">
                    2024-11-18
                </div>
                <!-- 详细信息 -->
                <div class="desc">
                    这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                    tempora libero quae dolor consectetur neque dolorem excepturi,
                    minima quos! Magnam, doloribus.
                </div>
                <a class="detail" href="../html/blog_content.html?blogId=1">查看全文&gt;&gt;</a>


            </div>
        </div>

    </div>
</body>

</html>